<template>
  <div class="app-container">
    <!-- 加载中提示 -->
    <el-skeleton v-if="loading" active />
    
    <!-- 详情内容（加载完成后显示） -->
    <el-card v-else shadow="hover">
      <!-- 基本信息（带头像 + 字段顺序匹配目标） -->
      <div class="section">
        <h3 class="section-title">基本信息</h3>
        <el-row :gutter="20" align="top">
          <!-- 左侧列：老人姓名、性别、床位号、年龄 -->
          <el-col :span="18">
            <el-row :gutter="30">
              <el-col :span="12">
                <el-form-item label="老人姓名">{{ taskInfo.elderlyName }}</el-form-item>
                <el-form-item label="性别">{{ taskInfo.elderlyGender }}</el-form-item>
                <el-form-item label="床位号">{{ taskInfo.bedNo }}</el-form-item>
              </el-col>
              <!-- 右侧列：护理等级、护理员姓名 -->
              <el-col :span="12">
                <el-form-item label="护理等级">{{ taskInfo.nursingLevel }}</el-form-item>
                <el-form-item label="年龄">{{ taskInfo.elderlyAge }}岁</el-form-item>
                <el-form-item label="护理员姓名">{{ taskInfo.caregiverName }}</el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <!-- 右侧头像列 -->
          <el-col :span="6">
            <el-form-item label="老人头像">
              <el-image 
                v-if="taskInfo.elderlyAvatar" 
                :src="getAvatarUrl(taskInfo.elderlyAvatar)" 
                style="width: 120px; height: 120px;" 
                fit="cover"
                preview-src-list="[getAvatarUrl(taskInfo.elderlyAvatar)]"
              />
              <div v-else class="no-avatar">暂无头像</div>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 护理项目（字段顺序匹配目标） -->
      <div class="section" style="margin-top: 20px;">
        <h3 class="section-title">护理项目</h3>
        <el-row :gutter="30">
          <!-- 左侧列：项目名称、执行状态、创建人、期望服务时间 -->
          <el-col :span="12">
            <el-form-item label="项目名称">{{ taskInfo.projectName }}</el-form-item>
            <el-form-item label="执行状态">
              <!-- 动态状态标签：已执行→绿色，已取消→红色 -->
              <el-tag :type="statusTagType" class="custom-status-tag">
                {{ taskInfo.status }}
              </el-tag>
            </el-form-item>
            <el-form-item label="创建人">{{ taskInfo.creatorName }}</el-form-item>
            <el-form-item label="期望服务时间">{{ formatDateTime(taskInfo.expectedServiceTime) }}</el-form-item>
          </el-col>
          <!-- 右侧列：关联单据、项目类型、创建时间、订单备注 -->
          <el-col :span="12">
            <el-form-item label="关联单据">{{ taskInfo.relatedOrderNo }}</el-form-item>
            <el-form-item label="项目类型">{{ taskInfo.projectType }}</el-form-item>
            <el-form-item label="创建时间">{{ formatDateTime(taskInfo.createTime) }}</el-form-item>
            <el-form-item label="订单备注">{{ taskInfo.orderRemark }}</el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 执行记录（仅“已执行”显示，带红色序号） -->
      <div v-if="taskInfo.status === '已执行'" class="section record-section" style="margin-top: 20px;">
        <h3 class="section-title record-title">
          <span class="record-index">1</span>执行记录
        </h3>
        <el-row :gutter="30">
          <el-col :span="6">
            <el-form-item label="执行人">{{ taskInfo.executorName }}</el-form-item>
            <el-form-item label="执行时间">{{ formatDateTime(taskInfo.executionTime) }}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="执行图片">
              <div v-if="taskInfo.executionImage" class="image-group">
                <el-image 
                  v-for="(img, index) in taskInfo.executionImage.split(',')" 
                  :key="index"
                  :src="getAvatarUrl(img)" 
                  style="width: 120px; height: 120px; margin-right: 10px;" 
                  fit="contain"
                  preview-src-list="[getAvatarUrl(img)]"
                />
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="执行记录">{{ taskInfo.executionRecord }}</el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 取消记录（仅“已取消”显示，带红色序号） -->
      <div v-if="taskInfo.status === '已取消'" class="section record-section" style="margin-top: 20px;">
        <h3 class="section-title record-title">
          <span class="record-index">1</span>取消记录
        </h3>
        <el-row :gutter="30">
          <el-col :span="6">
            <el-form-item label="取消人">{{ taskInfo.cancelerName }}</el-form-item>
            <el-form-item label="取消时间">{{ formatDateTime(taskInfo.cancelTime) }}</el-form-item>
            <el-form-item label="取消原因">{{ taskInfo.cancelReason }}</el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getArrangement } from "@/api/serve/arrangement";

// 时间格式化函数
const formatDateTime = (time) => {
  if (!time) return '';
  const date = new Date(time);
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
};

// 处理头像路径（根据项目实际路径调整，示例为直接返回）
const getAvatarUrl = (path) => path;

const route = useRoute();
const router = useRouter();
const taskInfo = ref(null);
const loading = ref(true);

// 动态计算状态标签类型：已执行→success（绿色），已取消→danger（红色）
const statusTagType = computed(() => {
  if (taskInfo.value?.status === '已执行') return 'success';
  if (taskInfo.value?.status === '已取消') return 'danger';
  return 'info'; // 待执行默认蓝色
});

// 查询任务详情
const getTaskDetail = async () => {
  const taskId = route.query.id;
  if (!taskId) {
    router.push('/serve/arrangement');
    return;
  }
  try {
    const res = await getArrangement(taskId);
    taskInfo.value = res.data || {};
  } catch (err) {
    console.error('查询任务详情失败：', err);
    window.$message?.error('查询失败，请重试');
  } finally {
    loading.value = false;
  }
};

onMounted(getTaskDetail);
</script>

<style scoped>
/* 模块容器通用样式 */
.section {
  border-bottom: 1px solid #eee;
  padding-bottom: 16px;
  margin-bottom: 16px;
}

/* 模块标题通用样式 */
.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 16px;
}

/* 执行/取消记录标题：红色圆点 + 序号 */
.record-title {
  display: flex;
  align-items: center;
}
.record-index {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #f56c6c;
  color: #fff;
  text-align: center;
  line-height: 16px;
  font-size: 12px;
  margin-right: 8px;
}

/* 表单项：标签右对齐 + 内容左对齐 */
.el-form-item {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}
.el-form-item__label {
  width: 80px;
  text-align: right;
  margin-right: 10px;
}
.el-form-item__content {
  flex: 1;
}

/* 自定义状态标签：优化颜色和圆角 */
.custom-status-tag {
  border-radius: 4px;
  padding: 2px 8px;
}
.custom-status-tag.is-success {
  background-color: #67c23a;
  border-color: #67c23a;
  color: #fff;
}
.custom-status-tag.is-danger {
  background-color: #f56c6c;
  border-color: #f56c6c;
  color: #fff;
}

/* 图片组：自动换行 + 间距 */
.image-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 无头像占位：居中提示 */
.no-avatar {
  width: 120px;
  height: 120px;
  border: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #999;
}
</style>